 <template>
  <div class="accountlist-wrap">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="text">账号列表</span>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        ref="tableref"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="70"> </el-table-column>
        <el-table-column prop="account" label="账号" width="170">
        </el-table-column>
        <el-table-column prop="userGroup" label="用户组" width="170">
        </el-table-column>
        <el-table-column label="日期" width="200">
          <template slot-scope="scope">{{ scope.row.ctime |  formatYMDhms}}</template>
        </el-table-column>
        <el-table-column width="170" label="操作">
          <template slot-scope="scope">
            <el-button
              style="margin-right: 10px"
              size="mini"
              @click="handleEdit(scope.row)"
            >
              编辑
            </el-button>

            <!-- 气泡确认框 -->
            <el-popconfirm
              @confirm="handleDelete(scope.row)"
              title="这是一段内容确定删除吗？"
            >
              <el-button slot="reference" size="mini" type="danger">
                删除
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分液器 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[3, 5]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 按钮 -->
      <div style="margin-top: 20px">
        <el-button class="checkedAll" @click="handleBatchDel"
          >批量删除</el-button
        >
        <el-button @click="cancleChoice">取消选择</el-button>
      </div>

      <!-- 点击编辑弹窗出现 -->
      <el-dialog title="编辑用户" :visible.sync="dialogFormVisible">
        <el-form :model="formData">
          <el-form-item label="用户名">
            <el-input v-model="formData.account" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户组">
            <el-select v-model="formData.userGroup" placeholder="请选择用户组">
              <el-option label="超级管理员" value="超级管理员"></el-option>
              <el-option label="普通用户" value="普通用户"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>

    <!-- 弹窗 -->
  </div>
</template>

<script>
import {
  getAccountList,
  delUserAccount,
  editAccount,
  batchAccount,
} from "@/api/user";
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 3,
      total: 0,
      ids: [],
      //多选数据
      multipleSelection: [],
      dialogFormVisible: false,
      //弹窗
      formData: {
        id: "",
        account: "",
        userGroup: "",
      },
    };
  },
  methods: {
    async getData() {
      let currentPage = this.currentPage;
      let pageSize = this.pageSize;
      //发送请求
      let res = await getAccountList({
        currentPage,
        pageSize,
      });
      // console.log(res);
      let { data, total } = res.data;
      this.total = total;
      this.tableData = data;

      //如果当前data为[] 且 当前页不等1 就退回上一页获取数据
      if (data.length === 0 && this.currentPage !== 1) {
        this.currentPage--;
        this.getData();
      }
    },

    handleSelectionChange(val) {
      this.ids = val.map((v) => v.id);
    },
    //批量选择
    handleBatchDel() {
      if (this.ids.length) {
        this.$confirm("此操作将永久删除选中用户, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            let res = await batchAccount({ ids: this.ids });
            console.log(res);
            let { code } = res.data;
            if (code === 0) {
              this.getData();
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        this.$message.error("未选择用户");
      }
    },

    //取消选择
    cancleChoice() {
      if (this.ids.length) {
        this.$refs.tableref.clearSelection();
        this.$message.success("取消选择成功");
      } else {
        this.$message.error("未选择用户");
      }
    },

    //编辑
    handleEdit(row) {
      console.log(row);
      this.dialogFormVisible = true;
      //数据回填
      this.formData = { ...row };
    },

    //编辑确认
    async handleConfirm() {
      let res = await editAccount(this.formData);
      // console.log(res);
      let { code } = res.data;
      if (code === 0) {
        this.dialogFormVisible = false;
        this.getData();
      }
    },

    //删除
    async handleDelete(row) {
      console.log(row);
      let { id } = row;
      let res = await delUserAccount({ id });
      console.log(res);
      let { code } = res.data;
      if (code == 0) {
        this.getData();
      }
    },
    //改变页码
    handleSizeChange(val) {
      //拿到当前每页条数 赋值给pageSize
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.accountlist-wrap {
  padding: 0 20px;
  margin-top: 15px;
}
.text {
  font-size: 20px;
}
.block {
  margin-top: 20px;
}
.el-button--danger {
  background-color: #d99bac;
  border: 0;
}
.checkedAll {
  background-color: #d99bac;
  color: #eee;
}
</style>